<template>
    <div class="header-bar">
      <el-dropdown class="header-nav-dropdown" placement="bottom-start"  >
        <slot></slot>
        <el-dropdown-menu  class="nav-menu" >
          <el-dropdown-item command="a" class="nav-item" v-for="item in category" :key="item.id">
            <div style="width: 300px">
              <el-popover
                visible-arrow="true"
                ref="popover1"
                placement="right"
                title=""
                width="700"
                trigger="hover">
<!--                渲染二级标题-->
                    <el-row :gutter="10" class="second-title" type="flex" align="middle">
                     <el-col :span="3" v-for="next in item.next" :key="next.id" ><el-link @click="$router.push({name:'category',params:{id:next.id}})">{{next.name}}</el-link></el-col>
                    </el-row>
<!--                一级标题-->
                <el-row :gutter="10" type="flex" justify="start" align="middle" slot="reference" class="first-title">
                  <el-col :span="20">{{item.name}}</el-col>
                  <el-col :span="2" push="2" >
                    <i class="el-icon-arrow-right"></i>
                  </el-col>
                </el-row>
              </el-popover>
            </div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
</template>

<script>
import request from '../../plugins/axios/index'
// eslint-disable-next-line camelcase
import base_url from '../../config/base_url'
export default {
  name: 'Header-Bar',
  data () {
    return {
      category: {}
    }
  },
  created () {
    request.request({
      url: base_url.home_url + 'category',
      method: 'get'
    }).then(result => {
      this.category = result.data
    })
  }
}
</script>

<style scoped lang="scss">
   .nav-item /deep/ div{
     font-size: 17px;
     font-weight: inherit;
   }
  .first-title {
    height: 40px;
    font-size: 24px;
  }
  .second-title {
    padding: 10px;
    height: 30px;
    font-size: 16px;
  }
</style>
